<template>
  <div class="risk">
    <!-- <div class="add" v-if="active == 1" @click="add()">创建证书</div> -->
    <eagle-tab-page-list
      url="/TrainRes/GetPageData"
      :params="params"
      @initActive="_initActive"
      @initList="_initList"
      @searchMore="searchMore"
      ref="eagleTabPageList"
    >
      <eagle-cell class="card" v-for="(item, index) in list" :key="index">
        <eagle-tag class="info_tag" type="primary">{{
          item.AttExt.slice(1, item.AttExt.length).toUpperCase()
        }}</eagle-tag>
        <div class="list-item">
          <template v-if="active == 0">
            <div class="list-item-l" @click="handleClick(item)">
              <eagle-image
                v-if="item.Cover == null"
                width="70"
                height="70"
                fit="cover"
                :src="require('@/assets/Images/AppIcon/icon_cou_default.jpg')"
                class="image-box-shadow"
              />
              <eagle-image
                v-else
                width="70"
                height="70"
                fit="cover"
                :src="
                  item.Cover.indexOf('http') > -1
                    ? item.Cover
                    : baseUrl + item.Cover
                "
                class="image-box-shadow"
              />
              <div class="list-item-r">
                <div class="mb-5" style="font-size: 14px">
                  {{ item.ResName }}
                </div>
                <div class="mb-5 text-ellipsis">
                  简介：{{ item.Introduce || "暂无描述" }}
                </div>
                <div class="mb-5">
                  <van-image
                    style="vertical-align: middle"
                    width="16"
                    height="16"
                    :src="
                      require('@/assets/Images/AppIcon/icon_default_header.png')
                    "
                  />
                  {{ item.CreateChnName }}
                </div>
                <div class="list-bottom">
                  <div>
                    <eagle-image
                      style="vertical-align: middle"
                      width="16"
                      height="16"
                      :src="
                        require('@/assets/Images/AppIcon/icon_calendar.png')
                      "
                    />
                    {{ item.CreateDate | formatDateTime }}
                  </div>
                  <div class="list-bottom-r">
                    <div>
                      <eagle-image
                        style="vertical-align: middle"
                        width="13"
                        height="9"
                        :src="
                          require('@/assets/Images/AppIcon/icon_ask_view.png')
                        "
                      />
                      {{ item.ViewCnt }}
                    </div>
                    <div class="ml-10">
                      <eagle-image
                        style="vertical-align: middle; margin-left: 5px"
                        width="11"
                        height="10"
                        :src="
                          item.IsCollected
                            ? require('@/assets/Images/AppIcon/icon_heart_on.png')
                            : require('@/assets/Images/AppIcon/icon_heart_off.png')
                        "
                      />
                      {{ item.CollectCnt }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="list-item-l" @click="handleClick(item)">
              <eagle-image
                v-if="item.Cover == null"
                width="70"
                height="70"
                fit="cover"
                :src="require('@/assets/Images/AppIcon/icon_cou_default.jpg')"
                class="image-box-shadow"
              />
              <eagle-image
                v-else
                width="70"
                height="70"
                fit="cover"
                class="image-box-shadow"
                :src="
                  item.Cover.indexOf('http') > -1
                    ? item.Cover
                    : baseUrl + item.Cover
                "
              />
              <div class="list-item-r">
                <div class="mb-5" style="font-size: 14px">
                  {{ item.ResName }}
                </div>
                <div class="mb-5 text-ellipsis">
                  简介：{{ item.Introduce || "暂无描述" }}
                </div>
                <div class="mb-5">
                  <eagle-image
                    style="vertical-align: middle"
                    width="16"
                    height="16"
                    :src="
                      require('@/assets/Images/AppIcon/icon_default_header.png')
                    "
                  />
                  {{ item.CreateChnName }}
                </div>
                <div class="list-bottom">
                  <div>
                    <eagle-image
                      style="vertical-align: middle"
                      width="16"
                      height="16"
                      :src="
                        require('@/assets/Images/AppIcon/icon_calendar.png')
                      "
                    />
                    {{ item.CreateDate | formatDateTime }}
                  </div>
                  <div class="list-bottom-r">
                    <div>
                      <eagle-image
                        style="vertical-align: middle"
                        width="13"
                        height="9"
                        :src="
                          require('@/assets/Images/AppIcon/icon_ask_view.png')
                        "
                      />
                      {{ item.ViewCnt }}
                    </div>
                    <div class="ml-10">
                      <eagle-image
                        style="vertical-align: middle; margin-left: 5px"
                        width="11"
                        height="10"
                        :src="
                          item.IsCollected
                            ? require('@/assets/Images/AppIcon/icon_heart_on.png')
                            : require('@/assets/Images/AppIcon/icon_heart_off.png')
                        "
                      />
                      {{ item.CollectCnt }}
                    </div>
                  </div>
                </div>
              </div>
              <eagle-tag class="tags" type="primary">{{
                item.AttExt.slice(1, item.AttExt.length).toUpperCase()
              }}</eagle-tag>
            </div>
          </template>
        </div>
      </eagle-cell>
    </eagle-tab-page-list>
    <!--筛选-->
    <eagle-popup
      class="eagle-popup" v-model="show" title="课件目录" position="bottom"  :popStyle="{ height: '80%' }" v-bind="$attrs" v-on="$listeners" ref="eaglePopup"
    >
      <template #preTitle>
        <span @click="handleClear()">清空</span>
      </template>
      <template #afterTitle>
        <span @click="handleSelect()" style="color: rgb(87, 190, 218)"
          >确定</span
        >
      </template>
      <eagle-cascader
          v-model="cascaderValue"
          :options="options"
          @close="show = false"
          @change="onFinish"
          :field-names="fieldNames"
          :closeable="false"
        >
          <template #title>
            <div>
              <span>已选择：</span>
              <div class="choose-title">{{ fieldValue || "请选择" }}</div>
            </div>
          </template>
        </eagle-cascader>
    </eagle-popup>
    
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      active: 0,
      params: [
        {
          title: "公司课件库",
          dataType: "Company",
          badge: false,
          dCode: "",
          moreSearch:true,
          moreValue:false,
        },
        {
          title: "上级分享库",
          dataType: "SuperiorShare",
          badge: false,
          dCode: "",
          moreSearch:false,
        },
      ],
      list: [],
      fieldNames: {
        text: "DName",
        value: "DCode",
        children: "children",
      },
      fieldValue: "",
      cascaderValue: "",
      options: [],
      show: false,
      selectedOptions: [],
    };
  },
  created() {
    this.getType();
  },
  methods: {
    _initActive(active) {
      if(this.active!=active && active==0){
        this.params[0].dCode = "";
        this.fieldValue = "";
        this.selectedOptions = [];
        this.cascaderValue = "";
        this.params[0].moreValue = false;
      }
      this.active = active;
    },
    _initList(list) {
      this.list = list;
    },
    onFinish({ selectedOptions }) {
      this.selectedOptions = selectedOptions;
      this.fieldValue = selectedOptions.map((option) => option.DName).join("/");
    },
    getType() {
      let _this = this;
      _this.$axios
      .get("/TrainRes/GetDirs",{params:{dirType:'Company'}})
      .then((res)=>{
        _this.options = _this.toTree(res.data);
      })
    },

    handleSelect() {
      this.params[this.active].dCode =
        this.selectedOptions[this.selectedOptions.length - 1].DCode;
        this.params[0].moreValue  = this.params[this.active].dCode?true:false;
        this.$nextTick(() => {
          this.$refs.eagleTabPageList.confirm();
        })
      this.show = false;
    },

    handleClear() {
      this.params[this.active].dCode = "";
      this.fieldValue = "";
      this.selectedOptions = [];
      this.cascaderValue = "";
      this.params[0].moreValue  = this.params[this.active].dCode?true:false;
      this.$nextTick(() => {
        this.$refs.eagleTabPageList.confirm();
      })
      this.show = false;
    },

    toTree(data) {
      var result = [];
      if (!Array.isArray(data)) {
        return result;
      }
      data.forEach((item) => {
        delete item.children;
      });
      let map = {};
      data.forEach((item, index) => {
        map[item.DNo] = item;
      });

      data.forEach((item, index) => {
        let parent = map[item.DPNo];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },
    // 设备详情
    handleClick(item) {
      
      if (item.Type != 4) {
        this.$router.push({
          path: "/Train/WareDetail",
          query: { id: item.ID, sid: item.SID, stype: item.SType },
        });
      } else {
        this.$router.push({
          path: "/Train/CourseDetail",
          query: { id: item.ID },
        });
      }
    },
    searchMore() {
      this.show = true;
    },
  },
};
</script>
<style lang="less" scoped>
.popup-content {
  .van-cascader__header {
    height: 80px;
  }
  .van-cascader__title {
    width: 100%;
  }
}
</style>
<style lang="less" scoped>
/deep/ .eagle-popup .popup-title {
  display: flex;
  align-content: center;
  justify-content: space-between;
  padding: 0 0.42667rem;
  border-bottom: 1px solid #ccc;
}

.choose-title {
  background-color: #fafafa;
  height: 30px;
  line-height: 30px;
  color: rgb(87, 190, 218);
}
.info_search {
  padding: 10px;
  border-radius: 5px !important;
  .van-field__control {
    background-color: #ffffff !important;
  }
}
</style>
<style lang="less" scoped>
.risk {
  min-height: 100vh;
  background-color: #e8f1f8;
}

.all_dep {
  background-color: #ffffff;
}
.warn_item {
  margin: 10px;
  background-color: #ffffff;
  /*margin-bottom: 10px;*/
  padding: 10px 0 10px 10px;
  border-radius: 5px;
  position: relative;
}
.warn_header {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 10px;
  .warn_tag {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 26.64rem 0 0 26.64rem;
  }
}
.dep_sort {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
}
.dep_btm {
  display: flex;
  justify-content: flex-end;
  .btm_item {
    display: flex;
    align-items: center;
    img {
      height: 15px;
      width: 15px;
      margin-right: 5px;
    }
  }
}

.card {
  .list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // position: relative;
    // background-color: #fff;
    // padding: 20px 10px;
    font-size: 12px;
    // border-radius: 8px;
    .list-item-l {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .list-item-r {
      width: 75%;
    }
  }
  .list-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .list-bottom-r {
      display: flex;
      align-items: center;
    }
  }
}
.tags {
  position: absolute;
  right: 0;
  top: 5px;
  border-radius: 26.64rem 0 0 26.64rem;
}
.screening-title {
  position: absolute;
  top: 13px;
  right: 0px;
  display: flex;
  align-items: center;
  z-index: 8;
  color: #999;
  font-size: 14px;
  padding: 0 10px;
  border-left: 1px solid #eee;
  img {
    width: 14px;
    height: 14px;
    margin-right: 3px;
  }
}
</style>
